import React, { Component } from 'react';
import {
	AppRegistry,
	StyleSheet,
	Text,
	View
} from 'react-native';

import HelloComponent from './HelloComponent';
import LifeCycleComponent from './LifeCycleComponent';
import EIComponent, { DEFAULT_URL, DEFAULT_PATH, DEFAULT_PAGE_SIZE, sum } from './EIComponent';
import PropsComponent from './PropsComponent'
import StateComponent from './StateComponent'
import RefComponent from './RefComponent'

/***
 * 统一的应用的入口
 **/
export default class setup extends Component {
	constructor(props) {
		super(props)
		this.state = ({
			remove: false,
			result: '?',
			size: 0
		})
	}

	render() {

		var view = this.state.remove ? null : <LifeCycleComponent style={styles.instructions} name="Wman" />
		var text = this.state.remove ? '生命周期 Wman 让他原地满血复活吧' : '生命周期 Wman 杀了他！'
		var params={
			name:'wman',
			age:26,
			sex:'boys',
		};
		//解构赋值
		var {name, sex}=params;

		return (
			<View style={styles.container}>
				<HelloComponent name="wman" />
				<Text style={{ fontSize: 20 }}
					onPress={
						() => {
							this.setState({
								remove: !this.state.remove
							})
						}
					}> {text}</Text>

				{view}

				<EIComponent path={DEFAULT_PATH} size={DEFAULT_PAGE_SIZE} />

				<Text style={{ fontSize: 20, backgroundColor: '#ffa000' }}
					onPress={
						() => {
							var result = sum(2, 3);
							this.setState({
								result: result,
							})
						}
					}> 2 + 3 = {this.state.result}</Text>

				<PropsComponent
					{...params}
					name={name}
					sex={sex}
				/>
				
				<StateComponent/>

				<Text style={{ fontSize: 20 }}
					onPress={
						() => {
							//this.refs.reftest
							var size = this.refs['reftest'].getSize();
							this.setState({
								size:size
							})
						}
					}>获取气球大小:{this.state.size}</Text>
				<RefComponent
					//ref={reftest=>this.reftest=reftest} ; var size = reftest.getSize()
					ref="reftest"
				/>

			</View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		// justifyContent: 'center',
		// alignItems: 'center',
		backgroundColor: '#F5FCFF',
	},
	welcome: {
		fontSize: 20,
		textAlign: 'center',
		margin: 10,
	},
	instructions: {
		textAlign: 'center',
		color: '#333333',
		marginBottom: 5,
	},
});
